<template>
    <div class="material-review-examination"  :key="materialReviewExaminationKey">
        <div class="material-review-tabs" v-if="!currentRow.isTopTabs && false">
            <a-tabs type="card" v-model:activeKey="activeKey" @change="tabPaneChange">
                <a-tab-pane key="材料审查" tab="材料审查"></a-tab-pane>
                <a-tab-pane key="申请信息" tab="事项信息"></a-tab-pane>
                <a-tab-pane key="环节流转记录" tab="流转记录"></a-tab-pane>
            </a-tabs>
        </div>
        <div class="material-review-content" 
        :style="{
            height:currentRow.isScyjBox?'calc(100vh - 140px)':(currentRow.isTopTabs?'calc(100vh - '+(currentRow.heightNum?currentRow.heightNum:206)+'px)':'calc(100vh - '+210+'px)'),
            marginTop:currentRow.isTopTabs?'0':'10px',
            }"
        >
            <div v-show="activeKey == '材料审查'">
                <a-spin size="large" :spinning="spinning" :key="spinningKey">
                    <!-- <div style="margin-bottom: 5px;" >
                        <a-button v-if="currentRow.isDelete" class="blue-btn" type="primary"  @click="rectificationClick('pushQyBcZgNotice')" icon="profile">发起整改</a-button>
                        <a-button v-if="currentRow.isDelete" class="green-l2-btn" type="primary" style="margin-left: 10px;" @click="historyListClick('querySqsxBczgjlHistoryList')" icon="clock-circle">整改历史记录</a-button>
                    </div> -->
                    <div v-if="!currentRow.isScyjBox" >
                        <div v-if="!reviewCommentsState" >
                            <div style="display: flex;align-items: center;" v-if="currentRow.isDelete">
                                <span>审查意见：</span>
                                <a-button style="margin-left: 10px;" class="blue-btn" type="primary" size="small"  @click="generateReviewCommentsClick()" icon="profile">生成审查意见</a-button>
                                <a-button style="margin-left: 25px;" class="green-l2-btn" type="primary" size="small"  @click="completeReviewClick('完成')" icon="check-circle">完成审查意见</a-button>
                            </div>
                            <div v-if="currentRow.isDelete" style="margin-bottom: 5px;">
                                <a-textarea 
                                    @blur="saveData('fzhpdyj',currentRow.fzhpdyj)"
                                    placeholder="请输入审查意见"
                                    v-model:value="currentRow.fzhpdyj"
                                    :autosize="{ minRows: 7, maxRows: 7 }"
                                ></a-textarea>
                            </div>
                        </div>
                    </div>
                    <div :style="{display: 'flex',border:currentRow.isDelete || currentRow.isScyjBox?'none':'1px solid #5ca3e5'}">
                        <div class="review-table" :key="directoryKey" v-if="directoryList.length" style="width: 35%;overflow-y: auto;" 
                        :style="{height:reviewCommentsState?'calc(100vh - '+175+'px)':(currentRow.isScyjBox?'calc(100vh - '+140+'px)':(currentRow.isTopTabs?'calc(100vh - '+(150 + currentRow.reserveBottom)+'px)':'calc(100vh - '+145+'px)'))}">
                            <table border bordercolor="#d9d9d9" style="width: 100%; margin-bottom: 15px;" v-if="reviewCommentsState">
                                <tr>
                                    <th style="background: rgb(222, 229, 237) !important;" >
                                        <div style="display: flex;justify-content: space-between;align-items: center;" >
                                            <span>综合评定材料</span>
                                            <a-button v-if="!currentRow.isCxbjSCYJBtn" class="orange-btn" type="primary" size="small"  @click="completeReviewClick('重新编辑')" icon="form">重新编辑审查意见</a-button>
                                        </div>
                                    </th>
                                    <tr v-for="(item,index) in reviewDocumentsList" :key="index" class="file-list-v-examination" v-if="(currentRow.fhjmc == '综合评定' && item.clmc == '审核件') || currentRow.fhjmc !== '综合评定'" >
                                        <td>
                                            <div style="display: flex;align-items: center;">
                                                <span style="flex: 1;" class="directory-list-fmlmc">{{ item.clmc }}</span>
                                            </div>
                                            <div class="file-for-box" >
                                                <div v-if="item.clmc !== '审核件'">
                                                    <div v-for="(trem,tIndex) in item.wjList" :key="tIndex">
                                                        <div class="file-for-v-1" 
                                                        :class="iframeData.id == trem.id?'select-file-list-examination':''" 
                                                        @click="getDirectoryItem({index,tIndex},'审核件')"
                                                        v-if="item.wjList.length"
                                                        >
                                                            <a  class="name-fclmc-text">{{ trem.fwjxsmc+trem.fwjlx }}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-if="item.clmc == '审核件'">
                                                    <div>
                                                        <div class="file-for-v-1" 
                                                            :class="iframeData.id == '审核件'?'select-file-list-examination':''" 
                                                            @click="getDirectoryItem({index:0,tIndex:0},'审核件')"
                                                        >
                                                            <a  class="name-fclmc-text">符合性审评审核件</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tr>
                            </table>
                            <table border bordercolor="#d9d9d9" style="width: 100%; " >
                                <tr>
                                    <th style="background: rgb(222, 229, 237) !important;" >材料目录/接收、整改材料</th>
                                    <!-- <th style="min-width:150px;" v-if="isFcljsqh">补正材料</th> -->
                                    <!-- <th>补齐补正说明</th> -->
                                </tr>
                                <tr v-for="(item,index) in directoryList" :key="index" class="file-list-v-examination">
                                    <td style="width: 50%;">
                                        <a-tooltip placement="topRight">
                                            <template slot="title">
                                                <span>{{ item.clmc }}</span>
                                            </template>
                                            <div style="display: flex;align-items: center;">
                                                <span style="flex: 1;" class="directory-list-fmlmc">{{ item.clmc }}</span>
                                                <a-upload
                                                :beforeUpload="$event=>{return false}"
                                                :showUploadList="false"
                                                action=""
                                                @change="RelatedAccessoriesUploadSave($event,item,{index,tIndex:0})">
                                                    <a-button class="blue-btn" type="primary" >整改上传</a-button>
                                                </a-upload>
                                            </div>
                                        </a-tooltip>
                                        <div class="file-for-box">
                                            <div v-for="(trem,tIndex) in item.wjList" :key="tIndex">
                                                <div class="file-for-v-1" 
                                                :class="iframeData.id == trem.id?'select-file-list-examination':''" 
                                                @click="getDirectoryItem({index,tIndex},'整改材料')"
                                                v-if="item.wjList.length"
                                                >
                                                    <span
                                                        v-if="trem.fwjlx7 == '企业'"
                                                        style="
                                                        padding: 0 3px;
                                                        color: #fff;
                                                        background: #ff9200;
                                                        border-radius: 3px;
                                                        "
                                                    >整改</span>
                                                    <!-- <span
                                                        style="padding: 0 3px;color: #fff;background: #18d118;border-radius: 3px;"
                                                        :style="{background:trem.fydzt=='已读'?'#18d118':'red'}"
                                                    >{{ trem.fydzt }}</span> -->
                                                    <a  class="name-fclmc-text">{{ trem.fwjxsmc+trem.fwjlx }}</a>
                                                    <!-- @click="downloadClick(trem)" -->
                                                    <!-- <a-icon style="padding: 0 3px;" class="eye-icon-v" type="eye" @click="fetchAndAddWatermark(trem)" v-if="trem.fwjxsmc.indexOf('.pdf') !== -1"/> -->
                                                    <a-icon style="padding: 0 3px;" class="delete-icon-v" type="delete" @click="deleteClick(trem)" v-if="trem.fwjlx7 == '企业' && !currentRow.isDelete"/>
                                                    <a-icon style="padding: 0 3px;" class="delete-icon-v" type="delete" @click="deleteClick(trem)" v-if="trem.fwjlx7 !== '企业' && currentRow.isDelete"/>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </td>
                                    <!-- <td style="text-align: center;">
                                        <span>{{ item.ml.fbcscyj }}</span>
                                    </td> -->
                                </tr>
                                <!-- <tr v-for="(item,index) in defectAdjustmentList" :key="index" class="file-list-v-examination">
                                    <td style="width: 50%;">
                                        <a-tooltip placement="topRight">
                                            <template slot="title">
                                                <span>{{ item.clmc }}</span>
                                            </template>
                                            <div style="display: flex;align-items: center;">
                                                <span style="flex: 1;" class="directory-list-fmlmc">{{ item.clmc }}</span>
                                            </div>
                                        </a-tooltip>
                                        <div class="file-for-box">
                                            <div v-for="(trem,tIndex) in item.wjList" :key="tIndex">
                                                <div class="file-for-v-1" 
                                                :class="iframeData.id == trem.id?'select-file-list-examination':''" 
                                                @click="getDirectoryItem({index,tIndex},'审评缺陷调整通知单')"
                                                v-if="item.wjList.length"
                                                >
                                                    <a  class="name-fclmc-text">{{ trem.fwjxsmc+trem.fwjlx }}</a>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </td>
                                </tr> -->
                            </table>
                        </div>
                        <div style="flex: 1;overflow-x: auto;">
                            <a-spin tip="正在加载中..." :spinning="iframeSpinning">
                                <div v-if="iframeData.id !== '审核件'" >
                                    <div v-if="iframeData.fwjxsmc">
                                        <span style="font-size: 16px;border: 2px solid #ff9200;color: #ff9200;padding: 0 3px;display: inline-block;border-radius: 15px;margin-left: 5px;margin-bottom: 5px;">{{ iframeData.fwjxsmc+iframeData.fwjlx }}</span>
                                    </div>
                                    <iframe :src="iframeSrc" width="100%" :height="reviewCommentsState?windowInnerHeight - 205:(currentRow.rightPreviewBoxH?currentRow.rightPreviewBoxH:rightPreviewBoxH)"  v-if="iframeSrc"></iframe>
                                    <div v-else style="display: flex;justify-content: center;margin: 20px 0;">
                                        <a-empty description="暂无文件或文件发生错误！"/>
                                    </div>
                                </div>
                                <div v-else >
                                    <div style="display: flex;justify-content: flex-end;margin-bottom: 5px;" >
                                        <a-button style="margin-right: 20px;" class="orange-btn" type="primary" size="small"  v-print="printObj" icon="copy">打印</a-button>
                                    </div>
                                    <div style="height: calc(100vh - 214px);width: 100%;overflow: auto;display: flex;justify-content: center;" >
                                        <div style="width: 794px;height: 100%;margin: 10px;" >
                                            
                                            <div class="review-documents-table-box" id="reviewDocuments-print-ID">
                                                <div class="title-qymc-sxmc">
                                                    xx食品药品审评查验中心{{iframeData.sqsx && iframeData.sqsx.fsxmc?iframeData.sqsx.fsxmc:''}}技术审评审核件
                                                </div>
                                                <div class="title-pdbh" v-if="iframeData.sqsx && iframeData.sqsx.fyshbh">
                                                    <span class="pdbh-left-text" >
                                                        <span class="pdbh-title-text" >编号：</span>
                                                        <span class="pdbh-right-text">
                                                            {{ iframeData.sqsx && iframeData.sqsx.fyshbh?iframeData.sqsx.fyshbh:'' }}
                                                        </span>
                                                    </span>
                                                </div>
                                                <table border bordercolor="#000" style="width: 100%;font-family: '楷体_GB2312' !important;" >
                                                    <tr>
                                                        <td class="th-text-box">申请单位</td>
                                                        <td colspan="3">{{ iframeData.sqsx && iframeData.sqsx.fqymc?iframeData.sqsx.fqymc:'' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="th-text-box" >审评范围</td>
                                                        <td colspan="3">{{ iframeData.sqsx && iframeData.sqsx.fcyjcfw?iframeData.sqsx.fcyjcfw:'' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="th-text-box">受理日期</td>
                                                        <td>{{ iframeData.sqsx && iframeData.sqsx.fslsj?iframeData.sqsx.fslsj:'' }}</td>
                                                        <td class="th-text-box" style="width: 95px;" >受理编号</td>
                                                        <td>{{ iframeData.sqsx && iframeData.sqsx.fslbh?iframeData.sqsx.fslbh:'' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="th-text-box">审评时间</td>
                                                        <td colspan="3">{{ iframeData.sqsx && iframeData.sqsx.fcykssj?iframeData.sqsx.fcykssj:'' }}&emsp;至&emsp;{{ iframeData.sqsx && iframeData.sqsx.fcyjssj?iframeData.sqsx.fcyjssj:'' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="th-text-box">
                                                            <div>审</div>
                                                            <div>查</div>
                                                            <div>意</div>
                                                            <div>见</div>
                                                        </td>
                                                        <td colspan="3" style="text-align: left;" >
                                                            <div>
                                                                <div>经审查：</div>
                                                                <div style="white-space: pre-wrap;" v-html="iframeData.sqsx && iframeData.sqsx.fzhpdyj?iframeData.sqsx.fzhpdyj:''" ></div>
                                                                <div style="display: flex;justify-content: space-between;align-items: flex-start;margin: 8px 0;" >
                                                                    <div>
                                                                        <div style="display: flex;">
                                                                            &emsp;&emsp;
                                                                            <div>
                                                                                <span>审查人：</span>
                                                                                <img
                                                                                v-if="iframeData.scrQm && iframeData.scrQm.qmpath"
                                                                                :src="iframeData.scrQm && iframeData.scrQm.qmpath?iframeData.scrQm.qmpath:''" 
                                                                                alt="" style="height: 32px;">
                                                                                <span v-else >{{ iframeData.scrQm && iframeData.scrQm.name?iframeData.scrQm.name:'' }}</span>
                                                                            </div>
                                                                        </div>
                                                                        <div style="margin-top: 3px;">
                                                                            <span v-if="iframeData.scrQm && iframeData.scrQm.qmrq">
                                                                                &emsp;&emsp;{{ iframeData.scrQm.qmrq }}
                                                                            </span>
                                                                            <span v-else>&emsp;&emsp;&emsp;&emsp;年&emsp;&emsp;月&emsp;&emsp;日&emsp;&emsp;</span>
                                                                        </div>
                                                                    </div>
                                                                    <div>
                                                                        <div style="display: flex;" >
                                                                            &emsp;&emsp;
                                                                            <div style="display: flex;flex-wrap: wrap;align-items: center;" >
                                                                                <span>复核人：</span>
                                                                                <div v-for="(item,index) in iframeData.fhrQmList" :key="index" style="padding: 2px;">
                                                                                    <img
                                                                                    v-if="item.qmpath"
                                                                                    :src="item.qmpath" 
                                                                                    alt=""
                                                                                    style="height: 32px;"
                                                                                    >
                                                                                    <span v-else >{{ item.name }}</span>
                                                                                </div>
                                                                                
                                                                            </div>
                                                                        </div>
                                                                        <div style="margin-top: 3px;">
                                                                            <span v-if="iframeData.fhrQmList && iframeData.fhrQmList.length && iframeData.fhrQmList[0].qmrq">
                                                                                &emsp;&emsp;{{ iframeData.fhrQmList[0].qmrq }}
                                                                            </span>
                                                                            <span v-else>&emsp;&emsp;&emsp;&emsp;年&emsp;&emsp;月&emsp;&emsp;日&emsp;&emsp;</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="th-text-box">科室负责人意见</td>
                                                        <td colspan="3" style="text-align: left;">
                                                            <div style="white-space: pre-wrap;" v-html="iframeData.ksfzrQm && iframeData.ksfzrQm.opinion?iframeData.ksfzrQm.opinion:''" ></div>
                                                            <div style="margin-top: 8px;display: flex;justify-content: space-between;align-items: center;">
                                                                <div>
                                                                    <span>签&emsp;名：</span>
                                                                    <img
                                                                        v-if="iframeData.ksfzrQm && iframeData.ksfzrQm.qmpath"
                                                                        :src="iframeData.ksfzrQm && iframeData.ksfzrQm.qmpath?iframeData.ksfzrQm.qmpath:''" 
                                                                        alt="" style="height: 32px;">
                                                                    <span v-else >{{ iframeData.ksfzrQm && iframeData.ksfzrQm.name?iframeData.ksfzrQm.name:'' }}</span>
                                                                </div>
                                                                <div>
                                                                    <span v-if="iframeData.ksfzrQm && iframeData.ksfzrQm.qmrq">
                                                                        &emsp;&emsp;{{ iframeData.ksfzrQm.qmrq }}
                                                                    </span>
                                                                    <span v-else>&emsp;&emsp;&emsp;&emsp;年&emsp;&emsp;月&emsp;&emsp;日&emsp;&emsp;</span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="th-text-box">中心领导意见</td>
                                                        <td colspan="3" style="text-align: left;">
                                                            <div style="white-space: pre-wrap;" v-html="iframeData.zxldQm && iframeData.zxldQm.opinion?iframeData.zxldQm.opinion:''" ></div>
                                                            <div style="margin-top: 8px;display: flex;justify-content: space-between;align-items: center;">
                                                                <div>
                                                                    <span>签&emsp;名：</span>
                                                                    <img
                                                                        v-if="iframeData.zxldQm && iframeData.zxldQm.qmpath"
                                                                        :src="iframeData.zxldQm && iframeData.zxldQm.qmpath?iframeData.zxldQm.qmpath:''" 
                                                                        alt="" style="height: 32px;">
                                                                    <span v-else >{{ iframeData.zxldQm && iframeData.zxldQm.name?iframeData.zxldQm.name:'' }}</span>
                                                                </div>
                                                                <div>
                                                                    <span v-if="iframeData.zxldQm && iframeData.zxldQm.qmrq">
                                                                        &emsp;&emsp;{{ iframeData.zxldQm.qmrq }}
                                                                    </span>
                                                                    <span v-else>&emsp;&emsp;&emsp;&emsp;年&emsp;&emsp;月&emsp;&emsp;日&emsp;&emsp;</span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a-spin>
                        </div>
                    </div>
                </a-spin>
            </div>
            <div v-if="activeKey == '申请信息'  || activeKey == '环节流转记录'" style="height: 100%;overflow: hidden;">
                <a-spin size="large" :spinning="modalSpinningPrice" tip="正在加载中...">
                    <eventSet
                        :key="eventSetKey" 
                        ref="examinationEventSetRef" 
                        @updatedSuccess="eventupdatedSuccess"
                    />
                </a-spin>
            </div>
        </div>
    </div>
</template>
<script>
import { 
    spcyqueryWjzgMlByQy,
    spcyjcqxtzMlList,
    spcyupdateMl,
    spcyoneKeyUpdateClmlBkck,
    spcyoneKeyUpdateClmlKck,
    spcyoneKeyUpdateClmlWsc,
    spcyoneKeyUpdateClmlYsc,
    spcySqsxWjjlgetCrossLocalFile,
    spcygetSummaryOpinionInScyj,
    spcyoneTouchYesScyj,
    spcyoneTouchNoScyj,
    spcydownloadQysqclById,
    spcyuploadSqsxFile,
    spcySqsxWjjldeleteFileById,
    webOfficeApiopenFileReadOnly,
    spcygenZhpdScyj,
    initWjgetZhpdScyjDjwc,
    initWjgetZhpdScyjCxbj,
    spcysaveFlow,
    initWjgetZhpdScyjState,
    spcyzhpdShjPrintData,
    spcyzhpdclMlList,
 } from './service/index'
 import YchConstant from "@/api/YchConstant";
 import blobType from '@/common/blobType'
 import eventSet from '../taskAcceptance/eventSet.vue'
import CommpStep from '../../../../../components/commp-step/commpStep.vue';
import moment from 'moment'
import store from '@/store'
import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib'
export default {
    components:{
    eventSet,
    CommpStep
},
    props:{

    },
    data(){
        return{
            moment:moment,
            modalSpinningPrice:true,
            activeKey:'',
            directoryList:[],
            defectAdjustmentList:[],
            currentRow:{},
            directoryKey:null,
            auditStatus:'',
            visibleState:'',
            allOpinion:'',
            handlingOpinionsVisualKey:null,
            eventSetKey:null,
            allStatusKey:null,
            materialReviewExaminationKey:null,
            spinning:false,
            spinningKey:null,
            isFcljsqh:false,
            realname:store.getters.userInfo.realname,//获取用户名
            rightPreviewBoxH:window.innerHeight - 128,
            windowInnerHeight:window.innerHeight,
            iframeSrc:'',
            iframeData:{},
            opinionKey:null,
            iframeSpinning:false,
            reviewCommentsState:false,
            reviewDocumentsList:[],
            printObj:{
                id:"reviewDocuments-print-ID", //需要打印的id名称
                popTitle:"符合性审评审核件",//文档的名称
                // preview:true,//预览功能，不好用
                zIndex:'20002',
                beforeOpenCallback(vue){
                    //console.log('打印回调',vue)
                },
                openCallback (vue) {//打开之前
                    //console.log('打开之前',vue)
                },
                closeCallback (vue) {//关闭了打印工具
                    //console.log('关闭了打印工具')
                },
            },
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        async getData(row){
            //console.log('我是材料审查',row)
            this.currentRow = row
            this.currentRow.reserveBottom = row.reserveBottom?row.reserveBottom:0
            if(this.currentRow.isDelete){
                await this.getScyjState()
            }
            this.spinning = true
            // await spcyqueryWjzgMlByQy({sqsxid:this.currentRow.sqsxid}).then(res=>{
            //     if(res.code == 200){
            //         // this.$message.success(res.message)
            //         //console.log('我是材料审查',res.result)
            //         this.directoryList = res.result
            //         res.result.forEach((item,index)=>{
            //             if(item.wjList && item.wjList.length){
            //                 item.wjList.forEach(trem=>{
            //                     if(trem.fwjlx7 == '企业'){
            //                         this.isFcljsqh = true
            //                         return
            //                     }
            //                 })
            //             }else{
            //                 this.isFcljsqh = false
            //                 return
            //             }
            //             if(!this.iframeData.id && item.wjList.length){
            //                 this.iframeData = {
            //                     ...item.wjList[0],
            //                     index,
            //                     tIndex:0
            //                 }
            //                 this.fetchAndAddWatermark(this.iframeData)
            //             }
            //         })
            //     }else{
            //         this.$message.warning(res.message)
            //     }
            //     this.spinning = false
            // })
            await this.getList('',this.currentRow.isDelete)
            if(!row.noFirstLoad){
                this.activeKey = row.isActiveKey?row.isActiveKey:'材料审查'
                if(!row.isRefresh){
                    this.directoryKey = Date.now()
                    this.handlingOpinionsVisualKey = Date.now()
                    this.allStatusKey = Date.now()
                    this.materialReviewExaminationKey = Date.now()
                }
                
            }
            this.spinning = false
            
        },
        getScyjState(){
            initWjgetZhpdScyjState({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.reviewCommentsState = res.result
                    if(this.reviewCommentsState){
                        this.getAuditFormSingleItem()
                    }
                }else{
                    this.reviewCommentsState = false
                }
            })
        },
        getAuditFormSingleItem(){
            spcyzhpdclMlList({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    //console.log('我得到什么数据来打印',res)
                    this.reviewDocumentsList = res.result
                    this.getDirectoryItem({index:0,tIndex:0},'审核件')
                }else{
                    this.reviewDocumentsList = []
                }
            })
        },
        rectificationClick(val){
            this.$emit('rectificationClick',val)
        },
        historyListClick(val){
            this.$emit('historyListClick',val)
        },
        //生成审查意见
        generateReviewCommentsClick(){
            spcygenZhpdScyj({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.currentRow.fzhpdyj = res.result
                    this.saveData('fzhpdyj',res.result)
                    
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        async completeReviewClick(val){
            if(val == '完成'){
                await initWjgetZhpdScyjDjwc({sqsxid:this.currentRow.sqsxid}).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.reviewCommentsState = true
                        this.getAuditFormSingleItem()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                await initWjgetZhpdScyjCxbj({sqsxid:this.currentRow.sqsxid}).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.reviewCommentsState = false
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            await this.getAuditFormSingleItem()
        },
        //保存
        saveData(name,value){
            let data = {
                jobid:this.currentRow.jobid,
                sqsxid:this.currentRow.sqsxid,
                opinion:'',
                smgflag:'否',
                map:{}
            }
            if(name){
                data.map[name] = value
            }
            spcysaveFlow(data).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.$emit('renewDataChange',{name:name,value:value})
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        //上传补齐补正
        RelatedAccessoriesUploadSave({file},item,row){
            //console.log(item)
            if(file.name.indexOf('.doc') == -1 && file.name.indexOf('.docx') == -1){
                const fileData = new FormData();
                fileData.append("file",file);
                fileData.append("type",'整改材料');
                fileData.append("sqsxid",this.currentRow.sqsxid);
                spcyuploadSqsxFile(fileData).then(res=>{
                    if(res.code !== 200){
                        this.$message.warning('请上传pdf文件或图片或者联系管理员!')
                    }else{
                        this.getList(row)
                        this.$message.success('上传成功')
                    }
                })
            }else{
                this.$message.warning('请上传pdf文件或图片')
            }
        },
        deleteClick(trem){
            let that = this
            this.$confirm({
                title:'您确认删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcySqsxWjjldeleteFileById({id:trem.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.getList()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        async getList(row,val){
            await spcyqueryWjzgMlByQy({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.directoryList = res.result
                    if(!val){
                        this.getDirectoryItem(row,'整改材料')
                    }
                    
                }
            })
            await spcyjcqxtzMlList({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.defectAdjustmentList = res.result
                    if(!val && !(this.directoryList.wjList && this.directoryList.wjList.length)){
                        this.getDirectoryItem(row,'审评缺陷调整通知单')
                    }
                    
                }
            })
        },
        getDirectoryItem(row,val){
            if(val == '审核件'){
                this.iframeData = {
                    ...this.reviewDocumentsList[row.index].wjList[row.tIndex],
                    index:row.index,
                    tIndex:row.tIndex,
                }
                if(row.index == 0){
                    let data = this.reviewDocumentsList[0]
                    data.sqsx.fzhpdyj = data.sqsx && data.sqsx.fzhpdyj?data.sqsx.fzhpdyj.replace(/ /g, '&emsp;'):''
                    data.ksfzrQm.opinion = data.ksfzrQm && data.ksfzrQm.opinion?data.ksfzrQm.opinion.replace(/ /g, '&emsp;'):''
                    data.zxldQm.opinion = data.zxldQm && data.zxldQm.opinion?data.zxldQm.opinion.replace(/ /g, '&emsp;'):''
                    this.iframeData ={
                        ...this.iframeData,
                        ...data,
                        id:'审核件'
                    }
                }else{
                    this.getTransferLetter()
                }
                
            }else if(val == '整改材料'){
                if(row){
                    this.directoryList.forEach((item,index)=>{
                        if(row.index == index){
                            this.iframeData = {
                                ...item.wjList[row.tIndex],
                                index,
                                tIndex:row.tIndex
                            }
                            this.fetchAndAddWatermark(this.iframeData)
                            // this.getList()
                        }
                    })
                }else{
                    let num = ''
                    this.directoryList.forEach((item,index)=>{
                        if(item.wjList.length && num == ''){
                            num = index
                            this.iframeData = {
                                ...item.wjList[0],
                                index,
                                tIndex:0
                            }
                            this.fetchAndAddWatermark(this.iframeData)
                            // this.getList()
                        }
                    })
                }
            }else if(val == '审评缺陷调整通知单'){
                if(row){
                    this.defectAdjustmentList.forEach((item,index)=>{
                        if(row.index == index){
                            this.iframeData = {
                                ...item.wjList[row.tIndex],
                                index,
                                tIndex:row.tIndex
                            }
                            this.fetchAndAddWatermark(this.iframeData)
                            // this.getList()
                        }
                    })
                }else{
                    let num = ''
                    this.defectAdjustmentList.forEach((item,index)=>{
                        if(item.wjList.length && num == ''){
                            num = index
                            this.iframeData = {
                                ...item.wjList[0],
                                index,
                                tIndex:0
                            }
                            this.fetchAndAddWatermark(this.iframeData)
                            // this.getList()
                        }
                    })
                }
            }
        },
        getTransferLetter(){//综合评定材料查看
            this.iframeSpinning = true
            this.iframeSrc = ''
            if(this.iframeData.fwjlx !== '.doc' && this.iframeData.fwjlx !== '.docx'){
                this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/spcyRsWjmb/openWjjl?id='+this.iframeData.id
                this.iframeSpinning = false
                // this.iframeKey = Date.now()
            }else{
                this.openFileClick(this.iframeData)
            }
        },
        openFileClick(val){
            webOfficeApiopenFileReadOnly({id:val.id}).then(res=>{
                if(res.code == 200){
                    this.iframeSrc = res.result.wordUrl
                }else{
                    this.$message.warning(res.message)
                }
                this.iframeSpinning = false
            })
        },
        eventupdatedSuccess(){
            this.modalSpinningPrice = false
        },
        onChangeExamine(val){
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '已审核'){
                spcyoneKeyUpdateClmlYsc(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '未审核'){
                spcyoneKeyUpdateClmlWsc(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }


        },
        onChangeVisible(val){
            //console.log(val)
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '允许'){
                spcyoneKeyUpdateClmlKck(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '不允许'){
                spcyoneKeyUpdateClmlBkck(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }
            

        },
        onChangeOpinionVisible(val){
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '有意见'){
                spcyoneTouchYesScyj(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '无意见'){
                spcyoneTouchNoScyj(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }
        },
        onChangeRowExamine(val,item){
            spcyupdateMl({fsczt:val.target.value,id:item.ml.id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        onChangeRowVisible(val,item){
            spcyupdateMl({fkckzt:val.target.value,id:item.ml.id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        tabPaneChange(val){
            if(val == '申请信息'  || val == '环节流转记录'){
                this.$nextTick(()=>{
                    setTimeout(()=>{
                        // this.eventSetKey = Date.now()
                        this.$refs.examinationEventSetRef.getDatas({...this.currentRow,tabPaneActiveKey:val,noFirstLoad:true,borderisFalse:true})
                        // this.$refs.examinationEventSetRef.$refs.dealWithRef.tabPaneChange(val)
                        this.modalSpinningPrice = true
                    },200)
                })
            }
        },
        viewClick(trem){
            //console.log(trem)
            window.open(
                bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/spcy/downloadQysqclFile?id='+trem.id
            )
            this.getData({...this.currentRow,noFirstLoad:true})
        },
        async fetchAndAddWatermark(trem) {
            this.iframeSrc = ''
            this.iframeSpinning = true
            try {
                // 从接口获取PDF文件流
                if(!trem.id){
                    return
                }
                const data = await spcySqsxWjjlgetCrossLocalFile({id:trem.id})
                //console.log('我获取到了什么文件流？',data)
                const realnameDate = this.realname+moment().format('YYYY年MM月DD日')
                //console.log('水印文本',realnameDate)
                this.previewPdfConstructor({
                    blob: data,
                    docTitle: 'window.open docTitle',
                    isAddWatermark: true, // 是否需要添加水印
                    watermark: { // watermark必填 里面可以不填
                        type: 'canvas',
                        text: realnameDate
                    }
                })
            } catch (error) {
                this.iframeSpinning = false
                //console.log('Error fetching or adding watermark:', error);
            }
        },
        previewPdfConstructor({ blob, docTitle, isAddWatermark = false, watermark: { type = 'text', text = 'WFT', image } }){
            try {
                const _self = this
                if(!blob) {
                    this.iframeSpinning = false
                    return console.error('[PDF Blob Is a required parameter]')
                }
                if(!isAddWatermark) { // 不添加水印
                    _self.preRightView(blob, docTitle)
                } else {
                    let bytes,imageType
                    if(type == 'image') {
                        if(!image) {
                        return console.error('["image" Is a required parameter]')
                        }
                        bytes = image.bytes
                        imageType = image.imageType
                    }
                    const map = {
                        // 'text': _self.addTextWatermark.bind(_self),
                        // 'image': _self.addImageWatermark.bind(_self),
                        'canvas': _self.addCanvasWatermark.bind(_self)
                    }
                    const pdfDoc =  PDFDocument.load(blob)
                    let params
                    if(type == 'text') params = { blob, pdfDoc, text, docTitle }
                    if(type == 'image') params = { blob, pdfDoc, bytes, imageType, docTitle }
                    if(type == 'canvas') params = { blob, pdfDoc, text, docTitle }
                    this.resultUrl = map[type](params)
                }
            } catch (error) {
                this.iframeSpinning = false
                //console.log('Error fetching or adding watermark:', error);
            }
         },
        async addCanvasWatermark({ blob, pdfDoc1, text, docTitle }) {
            try {
                const pdfDoc =  await PDFDocument.load(blob)
                // 旋转角度大小
                const rotateAngle = Math.PI / 4;
            
                // labels是要显示的水印文字，垂直排列
                let labels = new Array();
                labels.push(text);
            
                const pages = pdfDoc.getPages()
            
                const size = pages[0].getSize()
            
                let pageWidth = size.width
                let pageHeight = size.height

                //console.log('画布的宽高，',size.width,'-',size.height)
                let canvas = document.createElement('canvas');
                let canvasWidth = canvas.width = pageWidth;
                let canvasHeight = canvas.height = pageHeight;
            
                const context = canvas.getContext('2d');
                context.font = "15px Arial";
            
                // 先平移到画布中心
                context.translate(pageWidth / 2, pageHeight / 2 - 250);
                // 在绕画布逆方向旋转30度
                context.rotate(-rotateAngle);
                // 在还原画布的坐标中心
                context.translate(-pageWidth / 2, -pageHeight / 2);
            
                // 获取文本的最大长度
                let textWidth = Math.max(...labels.map(item => context.measureText(item).width));
            
                let lineHeight = 15, fontHeight = 12, positionY, i
                i = 0, positionY = 0
                while (positionY <= pageHeight) {
                positionY = positionY + lineHeight * 5
                i++
                }
                canvasWidth += Math.sin(rotateAngle) * (positionY + i * fontHeight) // 给canvas加上画布向左偏移的最大距离
                //console.log('给canvas加上画布向左偏移的最大距离',Math.sin(rotateAngle) * (positionY + i * fontHeight))
                canvasHeight = 2 * canvasHeight
                for (positionY = 0, i = 0; positionY <= canvasHeight; positionY = positionY + lineHeight * 5) {
                // 进行画布偏移是为了让画布旋转之后水印能够左对齐;
                context.translate(-(Math.sin(rotateAngle) * (positionY + i * fontHeight)), 0);
                for (let positionX = 0; positionX < canvasWidth; positionX += 1.5 * textWidth) {
                    let spacing = 0;
                    labels.forEach(item => {
                    context.fillText(item, positionX, positionY + spacing);        
                    context.fillStyle = 'rgba(0, 0, 0, .2)'; // 字体颜色
                    spacing = spacing + lineHeight;
                    })
                }
                context.translate(Math.sin(rotateAngle) * (positionY + i * fontHeight), 0);
                context.restore();
                i++
                }
                // 图片的base64编码路径
                let dataUrl = canvas.toDataURL('image/png');
                // 使用Xhr请求获取图片Blob
                let xhr = new XMLHttpRequest();
                xhr.open("get", dataUrl, true);
                xhr.responseType = "blob";
                xhr.onload = res => {
                const imgBlob = res.target.response
                // 获取Blob图片Buffer
                imgBlob.arrayBuffer().then(async buffer => {
                    const pngImage = await pdfDoc.embedPng(buffer)
                    for(let i = 0; i < pages.length; i++) {
                    pages[i].drawImage(pngImage)
                    }
                    // 序列化为字节
                    const pdfBytes = await pdfDoc.save()
                    this.preView(pdfBytes, docTitle)
                })
                }
                xhr.send();
            } catch (error) {
                this.iframeSpinning = false
                //console.log('Error fetching or adding watermark:', error);
            }
        },
        preView(stream, docTitle) {
            this.iframeSpinning = false
            const blob = new Blob([stream], { type: 'application/pdf' });
            this.iframeSrc =  URL.createObjectURL(blob);
            // this.getList()
            // const URL = window.URL || window.webkitURL;
            // const href = URL.createObjectURL(new Blob([stream], { type: 'application/pdf;charset=utf-8' }))
            // const wo = window.open(href)
            // // 设置新打开的页签 document title
            // let timer = setInterval(() => {
            //   if(wo.closed) {
            //     clearInterval(timer)
            //   } else {
            //     wo.document.title = docTitle
            //   }
            // }, 500)
        },
        downloadClick(trem){
            //console.log(trem)
            let fwjlx = trem.fwjxsmc.slice(trem.fwjxsmc.lastIndexOf('.'))
            var that = this
            this.DownloadTemplateLoading = true
            var fileName = trem.fwjxsmc
            let param = { id:trem.id}
            
            spcydownloadQysqclById(param).then((data) => {
                this.DownloadTemplateLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                    let index = blobType.suffix.indexOf(fwjlx)
                    let url = window.URL.createObjectURL(new Blob([data], { type:blobType.type[index] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                    this.getData({...this.currentRow,noFirstLoad:true})
                // }
            })
        },
        getInputOpinion(val,data){
            //console.log(data)
            let datas = {id:data.id}
            datas[data.valueKey] = val
            spcyupdateMl(datas).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        singleOpinionChange(val,name,item){
            //console.log(item)
            let datas = {id:item.ml.id}
            datas[name] = val.target.value
            spcyupdateMl(datas).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        }
    }
}
</script>
<style lang="less">
//1
.material-review-examination{
    width: 100%;
    
    // padding: 2px 5px 5px 5px;
    overflow-y: hidden;
    background-color: #fff;
    .material-review-tabs{
        // width: 100%;
        padding: 0 5px;
        background-color: #fff;
        position: relative;
        // top: 48px;
        top: 0;
        right: 0;
        // margin:0 10px;
        font-size: 20px !important;
        font-weight: 600 !important;
        .ant-tabs-bar{
            margin: 0;
        }
        .ant-tabs-nav .ant-tabs-tab{
            padding-top: 5px;
            padding-bottom: 5px;
            margin-right: 10px;
        }
        .ant-tabs-nav-container{
            height: 50px !important;
        }
        .ant-tabs-nav-scroll{
            padding-top: 10px;
            padding-left: 10px;
        }
    }
    .ant-tabs-tab-active{
        font-size: 16px;
        font-weight: 600 !important;
    }
    .ant-tabs-tab{
        font-size: 16px;
        font-weight: 600 !important;
        line-height: 28px !important;
        border-radius: 10px 10px 0 0 !important;
    }
    .ant-tabs-tab-active{
        background-color: #5ca3e5 !important;
        color: #fff !important;
        border-color: #5ca3e5 !important;
        box-shadow: 0px 0px 12px 0px #5ca3e5;
    }
    .material-review-content{
        margin-top: 10px;
        height: calc(100vh - 210px);
        overflow-y: hidden;
        
    }
}
//2
.material-review-examination{
    .review-table{
        padding-bottom: 3px;
        th{
            text-align: center;
            padding: 10px;
        }
        td{
            padding: 10px;
        }
    }
    .file-list-v-examination{
        .file-for-box{
            display: flex;
            flex-direction: column;
            // flex-wrap: wrap;
        }
        .file-for-v-1{
            border-radius: 2px;
            border: 1px solid #d9d9d9;
            border-radius: 15px;
            display: inline-block;
            // display: flex;
            // flex-direction: row;
            // justify-content: space-between;
            // align-items:center;
            padding: 5px;
            margin: 5px 0;
            .file-icon-box{
                margin-right:5px;
                display: flex;
                justify-content: space-evenly;
                .file-icon-v{
                    font-size: 42px;
                    color: rgb(24, 144, 255);
                    padding: 7px;
                }
                // .left-box{
                //     width: 28px;
                // }
                .right-box{
                    display: flex;
                    // flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;
                    padding-bottom: 2px;
                    width:35px;
                    
                }
                
            }
            .eye-icon-v{
                display:inline-block;
                padding-left: 30px;
                font-size: 18px;
                color: #1ab394;
            }
            .delete-icon-v{
                display:inline-block;
                padding-left: 30px;
                font-size: 18px;
                color: #ed5565;
            }
            .name-fclmc-text{
                // height: 60px;
                // text-align: left;
                // display:inline-block;
                // text-overflow: -o-ellipsis-lastline;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // display: -webkit-box;
                // // display: flex;
                // // flex-direction: column;
                // // justify-content: center;
                // -webkit-line-clamp: 3;
                // line-clamp: 3;
                // -webkit-box-orient: vertical;
                font-size: 14px;
            }
        }
        .directory-list-fmlmc{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .select-file-list-examination{
            // background-color: #38f;
            // a{
            //     color: #fff;
            // }
            background-image: linear-gradient(to bottom, #e7f3ff, #fff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff);
            background-size: 100% 100% !important;
            border: 2px solid #ff9200;
        }
        
    }
    
}
.processing-content-right-v{
    margin-left: 150px;
    background-color: #fff;
}
.review-documents-table-box{
    .title-qymc-sxmc{
        text-align: center;
        font-family: 'SimSun' !important;
        font-size: 34px;
        font-weight: bold !important;
        padding: 6px;
        color: #000;
        border:1px dashed #d9d9d9;
        border-bottom: none;
    }
    .title-pdbh{
        border:1px dashed #d9d9d9;
        border-bottom: none;
        padding: 6px;
        text-align: right;
        .pdbh-title-text{
            font-size: 18px;
            font-weight: bold;
            font-family: '楷体_GB2312' !important;
        }
        .pdbh-right-text{
            text-align: center;
            color: #000;
            font-size: 16px;
        }
    }
    
    .th-text-box{
        font-size: 18px;
        // font-weight: 600;
        width: 55px;
        text-align: center;
        padding: 8px;
        font-family: '楷体_GB2312' !important;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.65);
    }
    td{
        padding: 8px;
        text-align: center;
        color: #000;
        font-size: 18px;
        font-family: '楷体_GB2312' !important;
    }
}
@media print{
    #reviewDocuments-print-ID{
        .title-qymc-sxmc{
            text-align: center;
            font-family: 'SimSun' !important;
            font-size: 28px;
            font-weight: 600;
            padding: 6px;
            color: #000;
            border:1px dashed #d9d9d9;
            border-bottom: none;
        }
        .title-pdbh{
            border:1px dashed #d9d9d9;
            border-bottom: none;
            padding: 6px;
            text-align: right;
            .pdbh-title-text{
                font-size: 18px;
                font-weight: bold;
            }
            .pdbh-right-text{
                text-align: center;
                color: #000;
                font-size: 16px;
            }
        }
        
        .th-text-box{
            font-size: 18px;
            // font-weight: 600;
            width: 55px;
            text-align: center;
            padding: 8px;
            font-family: '楷体_GB2312' !important;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.65);
        }
        td{
            padding: 8px;
            text-align: center;
            color: #000;
            font-size: 18px;
            font-family: '楷体_GB2312' !important;
            color: rgba(0, 0, 0, 0.85);
        }
    }
}
</style>